<template>
  <div v-if="v.id">
    <van-icon name="arrow-left" class="left-arrow" @click="$router.back()" />
    <van-swipe>
      <van-swipe-item v-for="(v, i) in v.images" :key="i">
        <img :src="v" alt="" width="100%" height="300" style="object-fit: contain" />
      </van-swipe-item>
    </van-swipe>
    <div class="info">
      <h3>
        <span style="color: red">{{ v.price }}</span>
        <span
          ><s>{{ v.oldPrice }}</s>
        </span>
      </h3>
      <h3>{{ v.title }}</h3>
      <ul>
        <li v-for="(v, i) in v.descs" :key="i">
          <span>{{ i + 1 }}</span>
          {{ v }}
        </li>
      </ul>
    </div>
    <div class="sku">
      <van-cell title="已选" :value="label" is-link @click="show = true" />
      <Sku :show="show" :v="v" @handleOk="handleOk" />
    </div>

    <div class="commend-list">
      <van-button
        size="small"
        type="primary"
        plain
        style="border: 0"
        @click="$router.push('/more/commend/' + v.id)"
        >查看更多评论</van-button
      >
      <CommendItem v-for="v in v.commend.slice(0, 3)" :key="v.id" :v="v" />
    </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import Sku from '@/components/sku/index.vue'
import CommendItem from '@/components/commendItem/index.vue'
import { useCartHooks } from '@/stores/cart'
import { cloneDeep } from 'lodash'
import { showNotify } from 'vant'
const { addCart } = useCartHooks()
const route = useRoute()
const { id } = route.params

const show = ref(false)

const handleOk = (result) => {
  show.value = false
  selectSku.value = result
}
const onClickIcon = () => '点击图标'
const onClickButton = () => {
  // 是否 选择规格 颜色
  if (!selectSku.value.color || !selectSku.value.version) {
    show.value = true
    return
  }

  // 加入购物车
  addCart({
    ...v.value,
    selectSku: cloneDeep(selectSku.value),
    count: 1,
    state: true
  })

  showNotify({ type: 'primary', message: '加入购物车成功' })
}

const selectSku = ref({
  color: '',
  version: ''
})

const label = computed(() => {
  return `颜色： ${selectSku.value.color} 规格： ${selectSku.value.version}`
})

const v = ref({})
const _getV = async () => {
  const resp = await axios.get(`/api/list/${id}`)
  console.log(resp.data.data)
  v.value = resp.data.data
}
_getV()
</script>

<style lang="scss" scoped>
.left-arrow {
  position: fixed;
  left: 10px;
  top: 10px;
  background-color: rgba($color: #000000, $alpha: 0.4);
  padding: 4px;
  color: white;
  z-index: 10;
}

.info {
  padding: 10px;
  span {
    margin-right: 10px;
  }
}
</style>
